<template>
  <div>
    <div class="box_bg">
      <ScaleBox class="bg" :width="1024" :height="768" bgc="#00060f" :delay="100" :isFlat="false">
        <div class="main-container chemicalProcess">
          <img @click="goBack" class="back" src="../../../assets/back.png" alt="" />

          <div class="center_">
            <!-- <img class="nav_title" src="../../../assets/title.png" alt="" /> -->
            <div class="nav_title">{{ name }}</div>
          </div>
          <div @click="goto_TK" class="nav_title_tk">设备调控组件</div>
          <div class="center_">
            <div class="boxs">
              <div class="list_head">
                <div>组别</div>
                <div>开始时</div>
                <div>结束时</div>
                <div>下限值</div>
                <div>下限回差</div>
                <div>上限值</div>
                <div>上限回差</div>
                <div>单位</div>
                <div>开关</div>
              </div>
              <div class="list_boxs">
                <div class="list_content" v-for="(item, index) in tableData" :key="item.id">
                  <div>第{{ index + 1 }}组</div>
                  <div><el-time-picker @change="saveList(item)" popper-class="timerPicer" format="HH:mm" value-format="HH:mm" v-model="item.startTime" placeholder="任意时间点"> </el-time-picker></div>
                  <div><el-time-picker @change="saveList(item)" popper-class="timerPicer" format="HH:mm" value-format="HH:mm" v-model="item.endTime" placeholder="任意时间点"> </el-time-picker></div>
                  <div><el-input @change="saveList(item)" v-model="item.startValue" placeholder="-"></el-input></div>
                  <div><el-input @change="saveList(item)" v-model="item.startDiff" placeholder="-"></el-input></div>
                  <div><el-input @change="saveList(item)" v-model="item.endValue" placeholder="-"></el-input></div>
                  <div><el-input @change="saveList(item)" v-model="item.endDiff" placeholder="-"></el-input></div>
                  <div>{{ type == 4 ? '℃' : '％rh' }}</div>
                  <div @click="openStatus(item.id)">{{ item.status == 0 ? '禁用' : '启用' }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ScaleBox>
    </div>
  </div>
</template>
<script>
// import store from '@/store'
import { saveGrowthModelDecisionSchedule, getGrowthModelDecisionSchedules } from '@/api/system'
import axios from 'axios'

import ScaleBox from 'vue2-scale-box'
import moment from 'moment'
export default {
  components: {
    ScaleBox
  },
  data() {
    return {
      indexc: 0,

      type: '',
      tableData_list: [],
      table: [],
      tableData: [],
      name: ''
    }
  },
  mounted() {
    this.type = this.$route.query.type
    this.name = this.$route.query.name
    this.getGrowthModelDecisionSchedules()
  },
  beforeDestroy() {},
  methods: {
    goto_TK() {
      this.$router.push({
        path: '/home/temperatureRegulation',
        query: {
          type: this.type,
          name: this.name
        }
      })
    },
    openStatus(id) {
      let data = {
        id: id
      }
      const params = new URLSearchParams()
      for (const key in data) {
        params.append(key, data[key])
      }
      axios
        .post('https://zhny.bbyiot.com/intelligent_agriculture_webservice/pc/growthModelDecisionSchedule/updateGrowthModelDecisionScheduleStatus', params, {
          headers: {
            Authorization: window.localStorage.getItem('token_1'),
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        .then(res => {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
          this.getGrowthModelDecisionSchedules()
        })
    },
    saveList(val) {
      val.type0 = 0
      axios
        .post('https://zhny.bbyiot.com/intelligent_agriculture_webservice/pc/growthModelDecisionSchedule/saveGrowthModelDecisionSchedule', val, {
          headers: {
            Authorization: window.localStorage.getItem('token_1'),
            'Content-Type': 'application/json'
          }
        })
        .then(res => {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
          this.getGrowthModelDecisionSchedules()
        })
    },
    // getGrowthModelDecisionScheduleComponets() {
    //   let form = {
    //     decisionId: 55,
    //     type: this.type
    //   }
    //   getGrowthModelDecisionScheduleComponets(form).then(res => {
    //     if (res.code == 200) {
    //       this.tableData_list = []
    //       this.table = []
    //       if (res.data.length > 0) {
    //         let tableData_list = []
    //         res.data.map(item => {
    //           let a = {
    //             label: item.name,
    //             prop: item.code,
    //             deviceStatus: item.deviceStatus,
    //             id: item.id
    //           }
    //           tableData_list.push(a)
    //         })
    //         let arr = []
    //         tableData_list.map(item => {
    //           arr.push(item.deviceStatus.split(','))
    //         })
    //         let b = []
    //         arr[0].map((item, index) => {
    //           b.push(this.getFirstElements(arr, index))
    //           // console.log(this.getFirstElements(arr, index));
    //         })
    //         b.map(item => {
    //           let c = {}
    //           item.map((citem, index) => {
    //             c[index] = citem
    //           })
    //           this.table.push(c)
    //         })
    //         this.table.map((item, index) => {
    //           item.index = index + 1
    //         })
    //         console.log(this.table, 669)
    //         this.tableData_list = tableData_list
    //       } else {
    //         // this.tableData_list = []
    //         // this.table = []
    //       }
    //       console.log(this.tableData_list, this.table)
    //     }
    //   })
    // },
    getFirstElements(arrays, i) {
      return arrays.map(array => array[i])
    },
    getGrowthModelDecisionSchedules() {
      let form = {
        decisionId: 55,
        type: this.type,
        type0: 0
      }
      getGrowthModelDecisionSchedules(form).then(res => {
        if (res.code == 200) {
          this.tableData = res.data
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    getIndx(val) {
      this.$router.push({
        path: val
      })
    }
  }
}
</script>
<style>
.DateStyle {
  scale: 1.5;
  /* width: 670px;
  height: 580px; */
}
.timerPicer {
  scale: 2;
}
/* .DateStyle .el-picker-panel__content {
  width: 95%;
  height: 500px;
}
.DateStyle .el-date-table {
  height: 100%;
}
.DateStyle .el-date-table td {
  height: 60px;
  font-size: 20px;
}
.DateStyle .el-date-table tr {
  height: 60px;
  font-size: 23px;
}
.timerPicer .el-popper {
  width: 700px;
  height: 400px;
}
.el-time-spinner {
  height: 350px;
}
.el-time-spinner__wrapper {
  max-height: 350px;
}
.el-time-spinner__item {
  height: 40px;
  font-size: 20px;
}
.el-time-panel__content::before {
  top: 27%;
}
.el-time-panel__content::after {
  top: 27%;
} */
</style>
<style lang="less" scoped>
.operation {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.edit {
  cursor: pointer;
  width: 96px;
  height: 38px;
  background: #0f3052;
  border-radius: 21px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #007eff;
}
.del {
  cursor: pointer;
  width: 96px;
  height: 38px;
  background: #3d312a;
  border-radius: 21px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffac4c;
}
.device {
  position: absolute;
  top: 133px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: scroll;
  height: 560px;
  .deviceBox {
    margin: 10px;
    width: 466px;
    height: 265px;
    background: #19253a;
    border-radius: 27px;
    position: relative;
    .status_box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      position: absolute;
      width: 370px;
      left: 60px;
      bottom: 52px;
      .status_img {
        width: 92px;
        height: 92px;
        cursor: pointer;
      }
    }
    .deviceName {
      position: absolute;
      top: 26px;
      left: 29px;
      font-weight: 600;

      font-size: 24px;
      color: #f9fafa;
    }
    .deviceStatus {
      position: absolute;
      top: 34px;
      right: 29px;
      font-weight: 600;
      font-size: 24px;
      color: #f53325;
    }
  }
}

.back {
  width: 60px;
  height: 60px;
  cursor: pointer;
  position: absolute;
  top: 30px;
  left: 41px;
}
// /deep/.DateStyle {
//   width: 700px;
// }
// /deep/ .el-date-picker {
//   width: 700px;
// }

/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 0px; /* 设置滚动条的宽度 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #cceaf8; /* 设置滑块的背景颜色 */
  height: 12px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置滑块在悬停状态下的背景颜色 */
}
/deep/.el-input-group__append {
  background-color: #387dff;
  color: #ffffff;
  cursor: pointer;
}

/deep/ .el-input__inner {
  font-weight: bold;
  color: #fff;
  text-align: center;
  font-style: normal;
  border: none;
  border-radius: 9px;
  background: transparent;
  border-radius: 20px 0 0 20px;
  font-size: 16px;
}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100% !important;
}
/deep/.el-range-input {
  background: transparent;
}
/deep/.el-range-separator {
  color: #ffffff;
}

.boxs {
  position: absolute;
  top: 115px;
  width: 957px;
  height: 611px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(11.02941176470588px);
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  padding: 40px;
  .list_head {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 1.3fr 1fr 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #ffffff;
    white-space: nowrap;
    font-size: 16px;
    color: #f9fafa;
  }
  .list_boxs {
    height: 500px;
    overflow-y: scroll;
  }
  .list_content {
    display: grid;

    grid-template-columns: 1.3fr 1.3fr 1.3fr 1fr 1fr 1fr 1fr 1fr 1fr;
    min-height: 50px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    color: #f9fafa;
    border-bottom: 1px solid #979797;
    .content {
      text-align: left;
    }
  }
}
.aic {
  display: flex;
  align-items: center;
  min-height: 80px;
}
.bottom {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: space-around;
  width: 957px;
}
.bg {
  background: url('../../../assets/bg_.png') no-repeat center center;
  // width: 100vw;
  height: 100vh;
  width: 100vw;
  // background-color: #05032e;
  /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
  background-size: cover;
}
.box_bg {
  background-color: #011e7b !important;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.center_ {
  display: flex;
  justify-content: center;
  .nav_title {
    font-family: 'MyCustomFont', sans-serif;
    display: flex;
    justify-content: center;
    // background: url('../assets/title.png') no-repeat center center;
    position: absolute;
    top: 20px;
    font-size: 42px;
    color: #ffffff;
    line-height: 58px;
    text-align: justify;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, #0771ff 97%, #006dff 100%);
    -webkit-background-clip: text;
    color: transparent;

    .nav_t {
      font-weight: bolder;
      font-size: 34px;
      color: #3de6ff;
      line-height: 48px;
      text-align: center;
      font-style: normal;
      background: linear-gradient(90deg, #ffffff 0%, #02c2cb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.nav_title_tk {
  position: absolute;
  top: 60px;
  font-size: 22px;
  color: #ffffff;
  font-family: 'MyCustomFont', sans-serif;
  right: 20px;
}
@font-face {
  font-family: 'MyCustomFont'; /* 定义字体的名称 */
  src: url('../../../assets/tt.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}
</style>
